<template>
  <div style="margin-top:42px" v-if="windowWidth > 992">
    <div class="swiper-container swiper-container-initialized swiper-container-horizontal" id="swiper-banner">
      <div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px)">
        <div class="swiper-slide swiper-slide-active" style="width: 100%" v-for="(image, index) in images" :key="index">
          <img :src="isHttp(image.imgUrl)" alt="Banner Image" style="width: 100% "/>
        </div>
      </div>
      <!-- <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div> -->
      <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
    </div>
  </div>
  <div class="banner" v-else>
    <div class="block text-center">
      <el-carousel class="carousel"
                   :interval="2500"
                   height="200px"
                   :initial-index="0"
                   ref="carousel"
                   :autoplay="true"
                   arrow="always"
                   v-if="images.length>0">
        <el-carousel-item v-for="(image, index) in images " :key="index">
          <img :src="isHttp(image.imgUrl)" alt="案例展示" class="carousel-image"/>
          <!--          <img :src="`${item}`" alt="案例展示" class="carousel-image"/>-->
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
  <div class="index-container" v-if="config && windowWidth > 992">
    <div class="fl_1">
      <div class="max-1200 u-flex u-flex-wrap" style="display: flex">
        <div @click="change('about')" class="item">
          <img src="@/assets/image/index/zhui.png" alt="" class="ic"/>
          {{ config['link1' + globalLanguage.languageSuffix].v }}
        </div>

        <div @click="change('business')" class="item">
          <img src="@/assets/image/index/fa.png" alt="" class="ic"/>
          {{ config['link2' + globalLanguage.languageSuffix].v }}
        </div>

        <div @click="change('service')" class="item">
          <img src="@/assets/image/index/hao.png" alt="" class="ic"/>
          {{ config['link3' + globalLanguage.languageSuffix].v }}
        </div>
        <div @click="change('contant')" class="item">
          <img src="@/assets/image/index/cha.png" alt="" class="ic"/>
          {{ config['link4' + globalLanguage.languageSuffix].v }}
        </div>
        <!--  <a href="" class="item">
              <img src="/template/web/default/skin/img/image/kehu.png" alt="" class="ic"> 境外清关
          </a> -->
      </div>
    </div>

    <div class="fl_2 max-1200">
      <div class="title-box">
        <div class="title">
          {{ config['goodattitle' + globalLanguage.languageSuffix].v }}
        </div>
        <div class="line1"></div>
        <div class="subtitle">
          <div class="subtitle" v-html="config['goodat' + globalLanguage.languageSuffix].v"></div>
        </div>
      </div>
      <div class="list">
        <div class="li">
          <img
              :src="isHttp(config['goodatImgUrl1'].v)"
              alt=""
              class="pic"
          />
          <div class="info">
            <div class="tit">
              {{ config['goodatshort1' + globalLanguage.languageSuffix].v }}
            </div>
            <div class="type">{{ globalLanguage.languageSuffix === 'Cn' ? '风速达' : 'Группа Фэнь Сюда' }}</div>
            <div class="desc">
              {{ config["goodatshort1desc" + globalLanguage.languageSuffix].v }}
            </div>
          </div>
        </div>
        <div class="li">
          <img
              :src="isHttp(config['goodatImgUrl2'].v)"
              alt=""
              class="pic"
          />
          <div class="info">
            <div class="tit">
              {{ config["goodatshort2" + globalLanguage.languageSuffix].v }}
            </div>
            <div class="type">{{ globalLanguage.languageSuffix === 'Cn' ? '风速达' : 'Группа Фэнь Сюда' }}</div>
            <div class="desc">
              {{ config["goodatshort2desc" + globalLanguage.languageSuffix].v }}
            </div>
          </div>
        </div>
        <div class="li">
          <img :src="isHttp(config['goodatImgUrl3'].v)" alt="" class="pic"/>
          <div class="info">
            <div class="tit">
              {{ config["goodatshort3" + globalLanguage.languageSuffix].v }}
            </div>
            <div class="type">{{ globalLanguage.languageSuffix === 'Cn' ? '风速达' : 'Группа Фэнь Сюда' }}</div>
            <div class="desc">
              {{ config["goodatshort3desc" + globalLanguage.languageSuffix].v }}
            </div>
          </div>
        </div>
        <div class="li">
          <img
              :src="isHttp(config['goodatImgUrl4'].v)"
              alt=""
              class="pic"
          />
          <div class="info">
            <div class="tit">
              {{ config["goodatshort4" + globalLanguage.languageSuffix].v }}
            </div>
            <div class="type">{{ globalLanguage.languageSuffix === 'Cn' ? '风速达' : 'Группа Фэнь Сюда' }}</div>
            <div class="desc">
              {{ config["goodatshort4desc" + globalLanguage.languageSuffix].v }}
            </div>
          </div>
        </div>
        <div class="li">
          <img
              :src="isHttp(config['goodatImgUrl5'].v)"
              alt=""
              class="pic"
          />
          <div class="info">
            <div class="tit">
              {{ config["goodatshort5" + globalLanguage.languageSuffix].v }}
            </div>
            <div class="type">{{ globalLanguage.languageSuffix === 'Cn' ? '风速达' : 'Группа Фэнь Сюда' }}</div>
            <div class="desc">
              {{ config["goodatshort5desc" + globalLanguage.languageSuffix].v }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="fl_3">
      <div class="max-1200">
        <div class="title-box white">
          <div class="title">
            {{ config['sdzxtitle' + globalLanguage.languageSuffix].v }}
          </div>
          <div class="line1"></div>
          <div class="subtitle">
            {{ config["sdzx" + globalLanguage.languageSuffix].v }}
          </div>
        </div>

        <div class="list" style="display: flex; flex-wrap: wrap; gap: 10px">
          <div class="li li-0" style="flex: 1 1 calc(25% - 10px); box-sizing: border-box">
            <div class="pic" :style='{ "background-image": `url(${isHttp(config["sdzxpic1Cn"].v)})` }'
                 style="height: 200px; background-size: cover">
            </div>
            <div class="info">
              <div class="tit line-1">
                {{ config["sdzxtitle1" + globalLanguage.languageSuffix].v }}
              </div>
            </div>
          </div>
          <div class="li li-0" style="flex: 1 1 calc(25% - 10px); box-sizing: border-box">
            <div class="pic" :style='{ "background-image": `url(${isHttp(config["sdzxpic2Cn"].v)})` }'
                 style="height: 200px; background-size: cover"></div>
            <div class="info">
              <div class="tit line-1">
                {{ config["sdzxtitle2" + globalLanguage.languageSuffix].v }}
              </div>
            </div>
          </div>

          <div class="li li-0" style="flex: 1 1 calc(25% - 10px); box-sizing: border-box">
            <div class="pic" :style='{ "background-image": `url(${isHttp(config["sdzxpic3Cn"].v)})` }'
                 style="height: 200px; background-size: cover"></div>
            <div class="info">
              <div class="tit line-1">
                {{ config["sdzxtitle3" + globalLanguage.languageSuffix].v }}
              </div>
            </div>
          </div>

          <div class="li li-0" style="flex: 1 1 calc(25% - 10px); box-sizing: border-box">
            <div class="pic" :style='{ "background-image": `url(${isHttp(config["sdzxpic4Cn"].v)})` }'
                 style="height: 200px; background-size: cover"></div>
            <div class="info">
              <div class="tit line-1">
                {{ config["sdzxtitle4" + globalLanguage.languageSuffix].v }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="fl_4">
      <!-- <div class="title-box">
        <div class="title">中俄一车通零担拼车</div>
        <div class="line"></div>
      </div>
      <div class="cont">
        <p v-html="config['zeycd' + globalLanguage.languageSuffix]"></p>
      </div> -->
      <div class="fl_1">
        <div class="max-1200 u-flex " style="display: flex">
          <div @click="change('exhibition')" class="item">
            <img src="@/assets/image/index/zhui.png" alt="" class="ic"/>
            {{ config['manlu' + globalLanguage.languageSuffix].v }}
          </div>
          <div @click="change('exhibition')" class="item">
            <img src="@/assets/image/index/fa.png" alt="" class="ic"/>
            {{ config['kuailu' + globalLanguage.languageSuffix].v }}
          </div>
          <div @click="change('/exhibition')" target="_blank" class="item">
            <img src="@/assets/image/index/hao.png" alt="" class="ic"/>
            {{ config['tielu' + globalLanguage.languageSuffix].v }}
          </div>
          <div @click="change('/exhibition')" target="_blank" class="item">
            <img src="@/assets/image/index/hao.png" alt="" class="ic"/>
            {{ config['kongyun' + globalLanguage.languageSuffix].v }}
          </div>
          <div @click="change('/exhibition')" class="item">
            <img src="@/assets/image/index/cha.png" alt="" class="ic"/>
            {{ config['haiyun' + globalLanguage.languageSuffix].v }}
          </div>
          <!--  <a href="" class="item">
                <img src="/template/web/default/skin/img/image/kehu.png" alt="" class="ic"> 境外清关
            </a> -->

        </div>
      </div>
    </div>

    <div class="fl_5">
      <div class="max-1200">
        <div class="title-box white">
          <div class="title">
            {{ config['adoutustitle' + globalLanguage.languageSuffix].v }}
          </div>
          <div class="line1"></div>
          <div class="subtitle" v-html="config['aboutus' + globalLanguage.languageSuffix].v"></div>
        </div>
        <div class="flex u-flex-wrap">
          <div class="left">
                        <div class="text" v-html="config['aboutusdesc' + globalLanguage.languageSuffix].v"></div>
            <div @click="change('contant')" class="btn">
                            {{config['knowmore'+ globalLanguage.languageSuffix].v}}
            </div>
          </div>
          <div class="right">
            <img :src="isHttp(config['aboutusPic'].v)" alt="" class="w-100"/>
          </div>
        </div>
      </div>
    </div>

    <div class="fl_6">
    </div>

  </div>
  <div class="shouyeElement" style="text-align: center;" v-else-if="config && windowWidth <= 992">
    <!--4个链接-->
    <div class="server-info">
      <!--点击跳转到物流追踪页面-->
      <a href="javascript:void(0);" style="border-bottom:dashed 1px #ffffff;border-right: dashed 1px #ffffff ">
        <i class="iconfont icon-dingwei"></i> {{ config['link1' + globalLanguage.languageSuffix].v }}
      </a>
      <a href="javascript:void(0);" style="border-bottom: dashed 1px #ffffff">
        <i class="iconfont icon-search"></i> {{ config['link2' + globalLanguage.languageSuffix].v }}
      </a>
      <a href="javascript:void(0);" style="border-right: dashed 1px #ffffff"><i class="iconfont icon-dianzan"></i>
        {{ config['link3' + globalLanguage.languageSuffix].v }}</a>
      <a href="javascript:void(0);"><i class="iconfont icon-zixun"></i>
        {{ config['link4' + globalLanguage.languageSuffix].v }}</a>
    </div>
    <!--  公司优势-->
    <div class="CompanyIntroduce">
      <div class="CompanyIntroduceTitle">
        <div class="CompanyName">{{ config['goodattitle' + globalLanguage.languageSuffix].v }}</div>
        <div class="line"></div>
        <div class="CompanyContent">
          <p>
            {{ config['goodat' + globalLanguage.languageSuffix].v }}
          </p>
        </div>
      </div>
      <div style="width: 360px; height: 100%; margin: 0 auto">
        <el-card style="width: 360px; height: 100%" class="elCard">
          <img :src="isHttp(config['goodatImgUrl1'].v)"
               alt=""
               class="pic"
          />
          <div class="content">
            <div class="title">{{ config['goodatshort1' + globalLanguage.languageSuffix].v }}</div>
          </div>
          <div class="type">{{ globalLanguage.languageSuffix === 'Cn' ? '风速达' : 'Группа Фэнь Сюда' }}</div>
          <div class="desc">{{ config['goodatshort1desc' + globalLanguage.languageSuffix].v }}</div>
        </el-card>
        <el-card style="width: 360px; height: 100%" class="elCard">
          <img :src="isHttp(config['goodatImgUrl2'].v)"
               alt=""
               class="pic"
          />
          <div class="content">
            <div class="title">{{ config['goodatshort2' + globalLanguage.languageSuffix].v }}</div>
          </div>
          <div class="type">{{ globalLanguage.languageSuffix === 'Cn' ? '风速达' : 'Группа Фэнь Сюда ' }}</div>
          <div class="desc">{{ config['goodatshort2desc' + globalLanguage.languageSuffix].v }}</div>
        </el-card>
        <el-card style="width: 360px; height: 100%" class="elCard">
          <img :src="isHttp(config['goodatImgUrl3'].v)"
               alt=""
               class="pic"
          />
          <div class="content">
            <div class="title">{{ config['goodatshort3' + globalLanguage.languageSuffix].v }}</div>
          </div>
          <div class="type">{{ globalLanguage.languageSuffix === 'Cn' ? '风速达' : 'Группа Фэнь Сюда' }}</div>
          <div class="desc">{{ config['goodatshort3desc' + globalLanguage.languageSuffix].v }}</div>
        </el-card>
        <el-card style="width: 360px; height:100%" class="elCard">
          <img :src="isHttp(config['goodatImgUrl4'].v)"
               alt=""
               class="pic"
          />
          <div class="content">
            <div class="title">{{ config['goodatshort4' + globalLanguage.languageSuffix].v }}</div>
          </div>
          <div class="type">{{ globalLanguage.languageSuffix === 'Cn' ? '风速达' : 'Группа Фэнь Сюда' }}</div>
          <div class="desc">{{ config['goodatshort4desc' + globalLanguage.languageSuffix].v }}</div>
        </el-card>
        <el-card style="width: 360px; height: 100%" class="elCard">
          <img :src="isHttp(config['goodatImgUrl5'].v)"
               alt=""
               class="pic"
          />
          <div class="content">
            <div class="title">{{ config['goodatshort5' + globalLanguage.languageSuffix].v }}</div>
          </div>
          <div class="type">{{ globalLanguage.languageSuffix === 'Cn' ? '风速达' : 'Группа Фэнь Сюда' }}</div>
          <div class="desc">{{ config['goodatshort5desc' + globalLanguage.languageSuffix].v }}</div>
        </el-card>
      </div>
    </div>
    <!-- 四大专线 -->
    <div class="Companyzhuanxian">
      <div class="server">
        <div class="servertopic">
          <div class="servertitle">{{ config['sdzxtitle' + globalLanguage.languageSuffix].v }}</div>
          <div class="line"></div>
          <div class="subtitle" style="padding: 16px">
            <p class="pcorlor">
              {{ config['sdzx' + globalLanguage.languageSuffix].v }}
            </p>
          </div>
        </div>
        <div class="nocongtent" style="height: 20px"></div>
        <div class="container">
          <div class="zhuangxian">
            <div class="max-1200 u-flex u-flex-wrap h-100">
              <a href="javascript:void(0);" class="">{{ config['sdzxtitle1' + globalLanguage.languageSuffix].v }}</a>
              <a href="javascript:void(0);" class="">{{ config['sdzxtitle2' + globalLanguage.languageSuffix].v }}</a>
              <a href="javascript:void(0);" class="">{{ config['sdzxtitle3' + globalLanguage.languageSuffix].v }}</a>
              <a href="javascript:void(0);" class="">{{ config['sdzxtitle4' + globalLanguage.languageSuffix].v }}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 强势路线 -->
    <div class="Companyzhuanxian">
      <div class="server">
        <div class="servertopic">
          <div class="servertitle">{{ config['qslxtitle' + globalLanguage.languageSuffix].v }}</div>
          <div class="line"></div>
          <div class="subtitle">
            <p class="pcorlor">
              {{
                globalLanguage.languageSuffix === 'Cn' ? '风速达集团在中俄国际物流通道建设方面实力雄厚' : 'Группа Фэнь Сюда (Fengsuda Group) обладает мощными возможностями в строительстве международных логистических каналов между Китаем и Россией.'
              }}<br/>
              {{
                globalLanguage.languageSuffix === 'Cn' ? '为了顺应中俄贸易的各种趋势，倾力研究并打造了多个运输渠道。' : 'Для адаптации к различным тенденциям торговли между Китаем и Россией, группа Фэнь Сюда (Fengsuda Group) приложила все усилия к исследованию и созданию нескольких транспортных каналов'
              }}
            </p>
          </div>
        </div>
        <div class="nocongtent" style="height: 20px"></div>
        <div class="container">
          <div class="zhuangxian">
            <div class="max-1200 u-flex u-flex-wrap h-100">
              <a href="javascript:void(0);" class="active">{{ config['manlu' + globalLanguage.languageSuffix].v }}</a>
              <a href="javascript:void(0);" class="active">{{ config['kuailu' + globalLanguage.languageSuffix].v }}</a>
              <a href="javascript:void(0);" class="active">{{ config['tielu' + globalLanguage.languageSuffix].v }}</a>
              <a href="javascript:void(0);" class="active">{{ config['kongyun' + globalLanguage.languageSuffix].v }}</a>
              <a href="javascript:void(0);" class="active">{{ config['haiyun' + globalLanguage.languageSuffix].v }}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 车运内容-->
    <div class="server-content">
      <div>
        <div class="CompanyName">{{ config['zeycdtitle' + globalLanguage.languageSuffix].v }}</div>
        <div class="line"></div>
      </div>
      <div class="content">
        {{ config['zeycd' + globalLanguage.languageSuffix].v }}
      </div>
    </div>
    <!-- 关于我们 -->
    <div class="about-us">
      <div class="about">
        <div class="title-box">
          <div class="servertitle">{{ config['adoutustitle' + globalLanguage.languageSuffix].v }}</div>
          <div class="line"></div>
          <div class="content1">
            <p class="pcorlor1">
              {{ config['aboutus' + globalLanguage.languageSuffix].v }}
            </p>
          </div>
        </div>
        <div class="about-content">
          <div class="about-up">
            <div class="up1">
              {{ config['aboutusdesc' + globalLanguage.languageSuffix].v }}
            </div>
            <div class="up2">
              <a class="btn1" @click="change('about')">{{ config['knowmore' + globalLanguage.languageSuffix].v }}</a>
            </div>
          </div>
        </div>
        <div class="img-box">
          <img
              :src="isHttp(config['aboutusPic'].v)"
          />
        </div>
      </div>
    </div>
    <!-- 公司案列展示 -->
    <div class="CompanyBusiness" style="margin-top:10px;margin-bottom:20px">
      <div class="server">
        <div class="servertopic">
          <div class="servertitle">{{ globalLanguage.languageSuffix === 'Cn' ? '公司案例展示' : 'Примеры работы' }}
          </div>
          <div class="line"></div>
          <div class="subtitle">
            <p class="pcorlor" style="font-size: 12px;color: #ffffff;margin-top:10px">
              {{
                globalLanguage.languageSuffix === 'Cn' ? '展示公司在中俄贸易中的成功案例，让您更加了解我们。' : 'Показываем, как компания справляется с задачами в сфере торговли между Китаем и Россией. Это позволяет вам понять, как мы работаем, и узнать, какие услуги мы можем предложить.'
              }}
            </p>
          </div>
        </div>
        <div class="Btn">
          <el-button
              :class="{ 'active-button': activeButton === '专线服务' }"
              size="large"
              style="margin-top: 20px; margin-bottom: 20px;width: auto;font-size: 10px"
              @mousedown="setActiveButton('专线服务')"
              @mouseup="aa('专线服务')"
          >
            {{ globalLanguage.languageSuffix === 'Cn' ? '专线服务' : 'Специализированные линии' }}
          </el-button>
          <el-button
              :class="{ 'active-button': activeButton === '运输服务' }"
              size="large"
              style="margin-top: 20px; margin-bottom: 20px;width: auto;font-size: 10px"
              @mousedown="setActiveButton('运输服务')"
              @mouseup="aa('运输服务')"
          >
            {{ globalLanguage.languageSuffix === 'Cn' ? '运输服务' : 'Транспортные услуги' }}
          </el-button>
        </div>
        <div class="lunbotu">
          <el-carousel
              class="carousel"
              :interval="2500"
              type="card"
              height="200px"
              :initial-index="4"
              ref="carousel"
              :autoplay="auto"
          >
            <el-carousel-item v-for="(item, index) in images" :key="index">
              <img :src="isHttp(item.imgUrl)" alt="案例展示" class="carousel-image"/>
            </el-carousel-item>
          </el-carousel>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
import '@/assets/css/zhuanxian.css'
import '@/assets/css/shouye.css'
import Swiper from "swiper";
import "swiper/css";
import {Pagination, Autoplay} from "swiper/modules";
import "swiper/css/autoplay";
import "swiper/css/pagination";
import {listBanner, findOneConfigs, updateConfigs, finconfigmap, updateConfigMap} from "@/api/index.js";
import {onMounted, ref, getCurrentInstance, onUnmounted} from "vue";
import {ElMessage} from 'element-plus'
import {isHttp, islocahost} from "@/utils/index.js";
import {useRouter} from 'vue-router';
import service from "@/router/service/service.js";
import {createRouter as $router} from "vue-router/dist/vue-router.esm-browser.js";

const auto = ref(true); // 自动轮播
const items = ref([]); // 轮播图数据
const currentIndex = ref(0); // 轮播图索引
const activeButton = ref('专线服务'); // 按钮状态
const router = useRouter();
const globalLanguage = getCurrentInstance().appContext.config.globalProperties.globalLanguage;
const apiUrl = ref(import.meta.env.VITE_APP_BASE_API);
const images = ref([]);
const config = ref(null);
const carousel = ref(null);
const windowWidth = ref(window.innerWidth); // 用于判断当前窗口宽度
// 获取Vue实例的全局属性中的语言相关对象
const change = (data) => {
  router.push("/" + data);
}
const handleResize = () => {
  windowWidth.value = window.innerWidth;
};
const setActiveButton = (buttonName) => {
  activeButton.value = buttonName; // 更新当前激活的按钮
  if (buttonName === "专线服务") {
    currentIndex.value = 1; // 显示第二张图（索引从0开始）
  } else if (buttonName === "运输服务") {
    currentIndex.value = 6; // 显示第五张图（索引从0开始）
  }
  if (carousel.value) {
    carousel.value.setActiveItem(currentIndex.value);
  }
  auto.value = false;
};
const aa = (buttonName) => {
  activeButton.value = buttonName; // 更新当前激活的按钮
  if (buttonName === "专线服务") {
    currentIndex.value = 1; // 显示第二张图（索引从0开始）
  } else if (buttonName === "运输服务") {
    currentIndex.value = 4; // 显示第五张图（索引从0开始）
  }
  auto.value = true;
};

onMounted(() => {
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
const getList = async () => {
  try {
    const response = await listBanner(); //轮播图
    const data = await findOneConfigs();
    const configmap = await finconfigmap();
    images.value = response.list; // 设置获取到的图片数据
    let aa = {}
    for (let item of configmap.configMapList) {
      aa[item.k] = {
        v: item.v,
        id: item.id
      };
    }
    config.value = aa;
    console.log(config.value, "--sdsoj");
    // 设置获取到的配置数据

  } catch (error) {
    console.error("获取图片数据失败:", error);
  }
};
// 更换轮播图
//上传成功后回调
const handleSuccess = (response, file, id) => {
  console.log('上传成功的响应:', response);
  console.log('上传的文件信息:', file); // 查看文件信息
  if (response && response.url) {
    ElMessage.success("修改成功")
    //重新调用轮播图
    getList();
  }
};
// 在上传前检查文件的有效性
const beforeUpload = (file) => {
  console.log('准备上传的文件:', file); // 输出文件信息
  const isImage = file.type.startsWith('image/');
  console.log('是否是图片文件:', isImage);
  if (!isImage) {
    console.log('只能上传图片文件！');
    this.$message.error('上传的文件必须是图片！');
    return false; // 阻止上传
  }
  return true; // 继续上传
};
/*configmap的修改配置信息*/
const changeconfigmap = async (data) => {
  try {
    const response = await updateConfigMap(data);
    ElMessage.success("修改配置成功")
    console.log(response);
  } catch (error) {
    console.error("修改配置失败:", error);
  }
}

/*configs的修改配置信息*/
const changeText = async () => {
  try {
    const response = await updateConfigs(config.value);
    console.log(response);
    if (response.code === 200) {
      ElMessage.success("更新配置成功")
      //刷新页面
      getList();
    } else {
      ElMessage.error("更新配置失败")
    }
  } catch (error) {
    console.error("更新配置失败:", error);
  }
};
onMounted(() => {
  getList(); // 获取图片数据
  new Swiper("#swiper-banner", {
    modules: [Autoplay, Pagination],
    loop: true,
    autoplay: {
      delay: 2000,
    },
    // autoplay: false, // 禁用自动轮播
  });

  new Swiper(".swiper-container1", {
    modules: [Autoplay, Pagination],
    loop: true,
    slidesPerView: 3,
    autoplay: {
      delay: 2000,
    },
  });
});
// @ts-ignore
</script>

<style scoped>
.swiper-slide img {
  height: 520px; /* 图片高度为滑块的100% */
  width: auto; /* 宽度自动，根据比例调整 */
  object-fit: cover; /* 确保图片不会变形，保持其比例并填充滑块 */
}

.router-link-exact-active,
.router-link-active {
  color: inherit; /* 继承父元素的颜色 */
  text-decoration: none; /* 去除下划线等装饰 */
  background-color: transparent; /* 背景透明 */
  pointer-events: auto; /* 确保可交互 */
}

.router-link {
  display: inline; /* 根据实际情况调整显示方式，这里设置为内联元素，可与其他 <a> 标签保持一致 */
  color: inherit;
  text-decoration: none;
  background-color: transparent;
  pointer-events: auto;
}

.router-link:hover {
  color: inherit; /* 鼠标悬停时继承父元素颜色，即变为黑色 */
  text-decoration: none;
  background-color: transparent;
  pointer-events: auto;
}

.index-container .fl_1 {
  margin-top: -1.875rem;
  background: -webkit-linear-gradient(left, #f6321e, #f08816);
  background: linear-gradient(to right, #f6321e, #f08816);
}

.index-container .fl_1 .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-left: 1px dashed #fff;
  width: 25%;
  height: 5rem;
  font-size: 1.25rem;
  color: #fff;
}

.index-container .fl_1 .item:first-child {
  border-left: none;
}

.index-container .fl_1 .item .ic {
  width: 2.125rem;
  height: 2.125rem;
  margin-right: 0.9375rem;
}

.index-container .fl_1 .item:hover {
  color: #000;
  font-weight: bold;
}

.index-container .fl_1 .item:hover .ic {
  -webkit-filter: invert(1);
  filter: invert(1);
}

.index-container .title-box {
  display: -webkit-box;
  display: -ms-flexbox;
  /* display: flex; */
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
  margin-bottom: 3.125rem;
}

.index-container .title-box .title {
  display: block;
  font-size: 2rem;
  color: #333;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.index-container .title-box .line1 {
  width: 18.75rem;
  height: 2px;
  background-color: rgb(204, 204, 204);
  margin-bottom: 1.25rem;
}

.index-container .title-box .subtitle {
  font-size: 1rem;
  color: #666;
}

.index-container .title-box.white .title {
  color: #fff;
}

.index-container .title-box.white .line1 {
  background-color: #fff;
}

.index-container .title-box.white .subtitle {
  color: #fff;
}

.index-container .fl_2 {
  padding: 3.125rem 0 5rem;
}

.index-container .fl_2 .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.index-container .fl_2 .list .li {
  width: calc(20% - 0.625rem);
  margin-right: 0.625rem;
  -webkit-box-shadow: 0.3125rem 0.3125rem 0.625rem #f2f2f2;
  box-shadow: 0.3125rem 0.3125rem 0.625rem #f2f2f2;
}

.index-container .fl_2 .list .li:nth-child(4n) {
  margin-right: 0;
}

.index-container .fl_2 .list .li .pic {
  width: 100%;
  height: 123px
}

.index-container .fl_2 .list .li .info {
  padding: 0 5% 1.25rem;
  text-align: center;
}

.index-container .fl_2 .list .li .tit {
  width: 100%;
  line-height: 3.125rem;
  text-align: center;
  color: #f29e1a;
  font-size: 1.125rem;
  font-weight: bold;
}

.index-container .fl_2 .list .li .type {
  font-size: 1rem;
  text-align: center;
  font-weight: bold;
  color: #ccc;
  margin-bottom: 1.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  white-space: nowrap;
}

.index-container .fl_2 .list .li .type::before {
  display: block;
  content: "";
  width: 6.25rem;
  height: 0.1875rem;
  background: -webkit-gradient(
      linear,
      left top,
      right top,
      from(rgba(232, 232, 232, 0)),
      to(rgb(232, 232, 232))
  );
  background: linear-gradient(
      to right,
      rgba(232, 232, 232, 0),
      rgb(232, 232, 232)
  );
}

.index-container .fl_2 .list .li .type::after {
  display: block;
  content: "";
  width: 6.25rem;
  height: 0.1875rem;
  background: -webkit-gradient(
      linear,
      left top,
      right top,
      from(rgb(232, 232, 232)),
      to(rgba(232, 232, 232, 0))
  );
  background: linear-gradient(
      to right,
      rgb(232, 232, 232),
      rgba(232, 232, 232, 0)
  );
}

.index-container .fl_2 .list .li .desc {
  font-size: 1rem;
  color: #666;
  line-height: 1.5625rem;
}

.index-container .fl_3 {
  width: 100%;
  background-color: #7e7e7e;
  padding: 1.875rem 0 5rem;
}

/* .index-container .fl_3 .tabs {
  text-align: center;
  margin-bottom: 3.125rem;
}
.index-container .fl_3 .tabs .item {
  padding: 0 1.25rem;
  text-align: center;
  cursor: pointer;
  height: 2.25rem;
  line-height: 2.25rem;
  border: 0.125rem solid #f29e1a;
  margin: 0 0.3125rem;
  border-radius: 0.5625rem;
  color: #fff;
  display: inline-block;
  -webkit-box-sizing: initial;
  box-sizing: initial;
}
.index-container .fl_3 .tabs .item.active {
  background-color: #f29e1a;
} */
.index-container .fl_3 .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

.index-container .fl_3 .list .li {
  width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.index-container .fl_3 .list .li {
  width: 33.33%;
  padding: 0 0.3125rem;
}

.index-container .fl_3 .list .li .pic {
  width: 100%;
  height: 14.375rem;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.index-container .fl_3 .list .li .info {
  background-color: #fff;
  padding: 3% 5%;
  text-align: center;
}

.index-container .fl_3 .list .li .info .tit {
  font-size: 1rem;
  color: #333;
  margin-bottom: 0.625rem;
  text-align: center;
}

.index-container .fl_3 .list .li .info .des {
  line-height: 1.25rem;
  font-size: 0.875rem;
  color: #333;
}

.index-container .fl_4 {
  padding: 5.625rem 0;
}

.index-container .fl_4 .cont {
  margin-top: -3.125rem;
}

.index-container .fl_4 .cont p {
  display: block;
  font-size: 1.125rem;
  color: #333;
  line-height: 2.625rem;
  text-align: center;
}

.index-container .fl_5 {
  padding: 2.5rem 0;
  width: 100%;
  background-color: #7e7e7e; /* 更改为背景颜色 */
  padding: 1.875rem 0 5rem;
}

.index-container .fl_5 .left {
  overflow: hidden;
  width: 50%;
  padding-right: 1.875rem;
}

.index-container .fl_5 .left .text {
  color: #ccc;
  font-size: 1rem;
  line-height: 1.75rem;
}

.index-container .fl_5 .left .btn {
  width: 5.875rem;
  height: 1.75rem;
  font-size: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #f29e1a;
  border: 2px solid #f29e1a;
  margin-top: 0.625rem;
  float: right;
}

.index-container .fl_5 .left .btn:hover {
  background-color: #f29e1a;
  color: #fff;
}

.index-container .fl_5 .right {
  width: 50%;
}

.index-container .fl_6 {
  padding: 1rem 0;
}
</style>
